<template>
  <div class="container">
    <el-dialog
      title="新增目录"
      :visible="directoryDialog"
      width="24%"
      @open="openDialog"
      @close="closeDialog"
    >
      <template #default>
        <!-- 表单 -->
        <el-form
          ref="addDirectorysForm"
          :model="addDirectoryList"
          :rules="rules"
          label-width="105px"
        >
          <el-form-item label="所属学科" prop="subjectID" v-if="!$route.query.id">
            <el-select placeholder="请选择" v-model="addDirectoryList.subjectID">
              <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input
              v-model="addDirectoryList.directoryName"
              style="width: 50%"
              placeholder="请输入目录名称"
            />
          </el-form-item>
        </el-form>
      </template>
      <!-- footer插槽 -->
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="addDirectorysSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// import { list as getDirectoryAPI } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { detail, update, add } from '@/api/hmmm/directorys.js'
export default {
  props: {
    directoryDialog: {
      type: Boolean
    }
  },
  data () {
    return {
      addDirectoryList: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '所属学科不能为空', trigger: 'blur' }
        ],
        directoryName: [
          { required: true, message: '目录名称不能为空', trigger: 'blur' }
          // { min: 1, max: 10, message: '目录名称为1-10位', trigger: ['blur', 'change'] }
        ]
      },
      list: [],
      detailList: [],
      updateList: {}
    }
  },
  methods: {
    closeDialog () {
      this.$emit('closeDialog')
    },
    async getlist () {
      const res = await simple()
      // console.log(res)
      this.list = res.data
    },
    openDialog () {
      this.getlist()
    },
    // 数据回显
    async getEdit (data) {
      this.addDirectoryList.id = data.id
      // console.log(this.addDirectoryList.subjectID)
      // if (this.addDirectoryList.subjectID === '') {
      //   this.addDirectoryList.subjectID = '请选择'
      // }
      const res = await detail(data)
      this.addDirectoryList.directoryName = res.data.directoryName
      this.addDirectoryList.subjectID = res.data.subjectID
      // console.log(this.addDirectoryList)
      const res1 = await simple()
      this.detailList = res1.data.filter(item => item.value === this.addDirectoryList.subjectID)
      // console.log(this.detailList)
      this.addDirectoryList.subjectID = this.detailList[0].label
    },
    addDirectorysSubmit () {
      this.$refs.addDirectorysForm.validate(async (valid) => {
        if (valid) {
          // 表示通过
          // 1. 调取接口 判断是编辑还是新增
          if (this.addDirectoryList.id) {
            // 是编辑 调取修改接口
            // console.log(this.addDirectoryList)
            // this.addDirectoryList.id = this.addDirectoryList.subjectID
            await update(this.addDirectoryList)
            // console.log(res)
          } else {
            // 是新增
            // console.log(1)
            await add(this.addDirectoryList)
          }

          // 2，重新渲染数据（利用子传父 来调用父组件的渲染数据函数）
          this.$emit('getdireList')
          // 3. 提示用户 新增成功
          this.$message.success(`${this.addDirectoryList.id ? '编辑' : '新增'}目录成功`)
          // 4. 关闭弹框
          this.closeDialog()
          // 5.重置表单
          this.$refs.addDirectorysForm.resetFields()
          // 6. 重置数据
          this.addDirectoryList = {
            subjectID: '',
            directoryName: ''
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
